<template>
  <div>
    <s-container @search="handleQuery" @reset="handleQueryReset" :loading="loading">
      <template #searchForm>
        <n-form ref="searchRef" :label-width="100" :model="searchForm.value" label-placement="left">
          <n-space>
            <n-form-item label="登录IP地址" path="ipaddr" class="fi-w">
              <n-input v-model:value="searchForm.value.ipaddr" clearable @keyup.enter="handleQuery" />
            </n-form-item>
            <n-form-item label="用户名称" path="userName" class="fi-w">
              <n-input v-model:value="searchForm.value.userName" clearable @keyup.enter="handleQuery" />
            </n-form-item>
            <n-form-item label="状态" path="status" class="fi-w">
              <n-space vertical>
                <n-select style="width: 200px;" v-model:value="searchForm.value.status" clearable
                  :options="optionsStatus" @keyup.enter="handleQuery" />
              </n-space>
            </n-form-item>
            <n-form-item label="访问时间" path="loginTime" class="fi-w">
              <n-date-picker v-model:formatted-value="searchForm.value.loginTime" type="date" clearable
                format="yyyy-MM-dd HH:mm:ss" />
            </n-form-item>
          </n-space>
        </n-form>
      </template>

      <template #dataTable>
        <loading-empty-wrapper class="flex-col flex-1" :loading="loading" :empty="empty">
          <s-data-table :list="list" v-model:pageObj="pageObj" :columns="columns" />
        </loading-empty-wrapper>
      </template>
    </s-container>

  </div>
</template>

<script setup lang='ts'>
import { fetchLogPage } from '@/service/api/sys/log';
import { h, onMounted } from 'vue';
import { DataTableColumn, NSpace, NTag, NSelect, NButton } from 'naive-ui';
import { BusinessStatus } from "@/enum";
import { usePageList } from '@/hooks';
import { SysLoginLog } from './index';
interface DataSource extends SysLoginLog { }
interface SearchForm {
  userId?: number;
  userName?: string;
  ipaddr?: string;
  loginLocation?: string;
  browser?: string;
  os?: string;
  status?: string;
  msg?: string;
  loginTime?: string;
}
const optionsStatus = [
  {
    label: '成功',
    value: BusinessStatus.Yes
  },
  {
    label: '失败',
    value: BusinessStatus.No
  }
]


const columns: DataTableColumn<DataSource>[] = [
  {
    title: '用户账号',
    key: 'userName',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '登录IP地址',
    key: 'ipaddr',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '登录地点',
    key: 'loginLocation',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '浏览器类型',
    key: 'browser',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '操作系统',
    key: 'os',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '登录状态',
    key: 'status',
    align: 'center',
    ellipsis: {
      tooltip: true
    },
    sorter: true,
    render(row: DataSource) {
      return h(
        NTag,
        {
          style: {
            marginRight: '6px'
          },
          type: row.status === BusinessStatus.Yes ? 'info' : 'error',
          bordered: false
        },
        {
          default: () => row.status === BusinessStatus.Yes ? "成功" : "失败"
        }
      )
    }

  },
  {
    title: '提示消息',
    key: 'msg',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '访问时间',
    key: 'loginTime',
    align: 'center',
    sorter: true,
    ellipsis: {
      tooltip: true
    }
  }
];

const {
  loading,
  empty,
  searchForm,
  list,
  pageObj,
  getList,
  handleQueryReset,
  handleQuery
} = usePageList<DataSource>(
  initSearchFormData,
  fetchLogPage,
  undefined,
  undefined
);


function initSearchFormData(): SearchForm {
  return {};
}

onMounted(() => {
  getList();
});
</script>

<style lang='scss' scoped></style>
